<template>
	<jb-crud-page ref="pageRef" searchUrl="/mcpResource/list" conditions-align="start"
		:editComponent="ModelEdit" :searchConditions="pageConditions" @afterSearch="formatData">
		<template #conditions-form>
			<jb-input v-model:value="pageConditions.keywords" placeholder="请输入关键词搜索" style="width: 200px"></jb-input>
		</template>
		<template #opt>
			<jb-btn type="primary" secondary @click="pageRef.showEditModal('添加资源')">添加资源</jb-btn>
		</template>

		<template #default="{list,tableStartIndex}">
			<jb-table :data="list" :start-index="tableStartIndex" :row-config="{height: 100}">
				<jb-column type="seq" title="序号" width="60" fixed="left"></jb-column>
				<jb-column field="name" title="资源名称" min-width="160" fixed="left"></jb-column>
				<jb-column field="typeName" title="资源类型" min-width="120"></jb-column>
				<jb-column title="资源配置" min-width="200">
					<template #default="{row}">
						<n-scrollbar style="max-height: 100px">
							<div v-if="row.type === 0" style="display: flex; flex-direction: column">
								<n-tag v-if="row.command" type="info" style="margin-top: 5px">
									命令: {{ row.command }}
								</n-tag>
								<n-tag v-if="row.args && row.args.length > 0" type="info" style="margin-top: 5px">
									参数: {{ row.args.join(', ') }}
								</n-tag>
								<template v-if="row.env && Object.keys(row.env).length > 0">
									<n-tag type="info" style="margin-top: 5px">
										环境变量:
									</n-tag>
									<div style="padding-left: 12px;">
										<n-tag v-for="(value, key) in row.env" :key="key" type="success" style="margin-top: 5px; margin-right: 5px;">
											{{ key }}: {{ value }}
										</n-tag>
									</div>
								</template>
							</div>
							<div v-else-if="row.type === 1" style="display: flex; flex-direction: column">
								<n-tag v-if="row.url" type="info" style="margin-top: 5px">
									URL: {{ row.url }}
								</n-tag>
							</div>
							<div v-else>
								<span>无配置信息</span>
							</div>
						</n-scrollbar>
					</template>
				</jb-column>
				<jb-column field="createTime" title="创建时间" min-width="160"></jb-column>
				<jb-column field="enable" title="是否启用" min-width="100" fixed="right">
					<template #default="{ row }">
						<jb-switch v-model:value="row.enable" :url="`/mcpResource/toggleEnable/${row.id}`"
							@update:value="pageRef.loadData()"></jb-switch>
					</template>
				</jb-column>

				<jb-column title="操作" width="120" fixed="right">
					<template #default="{ row }">
						<jb-btn class="mx-8px" tip-text="编辑资源" secondary circle type="warning" :icon="Icons.EDIT"
							@click="pageRef.showEditModal('编辑资源',{id:row.id})"></jb-btn>

						<jb-btn class="mx-8px" tip-text="删除资源" secondary circle type="error" :icon="Icons.DELETE"
							:confirmText="'确认删除该资源？'" :url="`/mcpResource/delete/${row.id}`"
							@success="pageRef.loadData()"></jb-btn>
					</template>
				</jb-column>
			</jb-table>
		</template>
	</jb-crud-page>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	import ModelEdit from './cpns/model-edit.vue'
	import {
		useResetableData
	} from '@/hooks/common/use-resetable-data'
	import {
		Icons
	} from '@/constants'
	import {
		JBoltApi
	} from "@/service/request/index.js";

	// Expose
	const pageRef = ref(null)
	const pageConditions = useResetableData({
		keywords: ''
	})

	function handleModalYesClick({
		componentRef,
		close
	}) {
		componentRef.submit(() => {
			close()
			pageRef.value.loadData()
		})
	}

	const mcpTypeList = ref([
		{ value: 0, label: '本地资源' },
		{ value: 1, label: '远程资源' }
	])

	function formatData(data) {
		if (data) {
			data.forEach(item => {
				// 确保配置信息正确解析
				if (item.config) {
					try {
						const config = JSON.parse(item.config);
						if (item.type === 0) { // 本地资源
							item.command = config.command;
							item.args = config.args;
							item.env = config.env || {};
						} else if (item.type === 1) { // 远程资源
							item.url = config.url;
						}
					} catch (error) {
						console.error('解析配置信息失败:', error);
					}
				}
			});
		}
		return data;
	}
</script>

<style scoped>
	.page-container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.content-card {
		flex: 1;
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.fixed-header {
		padding: 16px;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
		flex-shrink: 0;
	}

	.table-content {
		flex: 1;
		overflow-y: auto;
		padding: 0 16px;
	}

	.fixed-footer {
		padding: 16px;
		background-color: #fff;
		border-top: 1px solid #f0f0f0;
		display: flex;
		justify-content: flex-end;
		flex-shrink: 0;
	}

	.mx-8px {
		margin-left: 8px;
		margin-right: 8px;
	}
</style>
